import React, { useState, useEffect, useRef, useCallback } from "react";
import { Swiper, Tabs, Tag, Button, Rate, SpinLoading } from "antd-mobile";
import { 
    SearchOutline, 
    FireFill, 
    HeartFill, 
    StarFill, 
    UserOutline
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
// import { useSelector, useDispatch } from 'react-redux';
// import { increment } from '../../store/stateSlice/state';
import style from './home.module.css';
// import request from "../../api/request";
import { Toast } from "antd-mobile";
import logo from "../../../assets/homeimg/logo.png";
import VirtualList from "../../../components/VirtualList";

function Index() {
    const navigate = useNavigate();
    // const dispatch = useDispatch();
    // const healthScore = useSelector(state => state.counter.value);

    // 康友圈热点相关状态
    const [healthArticles, setHealthArticles] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [hasMore, setHasMore] = useState(true);
    const [isLoading, setIsLoading] = useState(false);
    const [isLoadingMore, setIsLoadingMore] = useState(false);
    const [isRefreshing, setIsRefreshing] = useState(false);
    const pageSize = 10;

    // 活动列表数据
    const [activitiesList, setActivitiesList] = useState([]);

    // 康友圈热点数据获取
    const fetchHealthArticles = useCallback(async (page = 1, isLoadMore = false) => {
        if (isLoading || (isLoadMore && !hasMore)) return;
        
        try {
            if (isLoadMore) {
                setIsLoadingMore(true);
            } else {
                setIsLoading(true);
            }

            // 模拟API调用，实际项目中替换为真实API
            const mockData = generateMockHealthArticles(page, pageSize);
            
            if (page === 1) {
                setHealthArticles(mockData);
            } else {
                setHealthArticles(prev => [...prev, ...mockData]);
            }
            
            setCurrentPage(page);
            setHasMore(mockData.length === pageSize);
            
        } catch (error) {
            console.error("获取康友圈热点失败:", error);
            Toast.show({ content: "获取康友圈热点失败，请稍后重试", duration: 2000 });
        } finally {
            setIsLoading(false);
            setIsLoadingMore(false);
        }
    }, [isLoading, hasMore, pageSize]);

    // 生成模拟康友圈热点数据
    const generateMockHealthArticles = (page, size) => {
        const articles = [];
        const startIndex = (page - 1) * size;
        
        for (let i = 0; i < size; i++) {
            const index = startIndex + i;
            articles.push({
                id: index + 1,
                title: `健康生活指南 ${index + 1}`,
                subtitle: `第${index + 1}期健康生活建议`,
                summary: `这是一篇关于健康生活的专业文章，涵盖了营养搭配、运动健身、心理健康等多个方面的专业建议。`,
                author: `健康专家${index + 1}`,
                publishTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toLocaleDateString(),
                readCount: Math.floor(Math.random() * 10000) + 100,
                likeCount: Math.floor(Math.random() * 500) + 10,
                tags: ['健康生活', '营养搭配', '运动健身'].slice(0, Math.floor(Math.random() * 3) + 1),
                image: `https://picsum.photos/80/60?random=${index + 1}`,
                category: ['营养健康', '运动健身', '心理健康', '疾病预防'][Math.floor(Math.random() * 4)]
            });
        }
        
        return articles;
    };



    // 初始化数据
    useEffect(() => {
        // 获取康友圈热点数据
        fetchHealthArticles(1);
        
        // 初始化活动列表数据
        const mockActivities = [
            {
                id: 1,
                title: '健康讲座',
                subtitle: '心血管疾病预防知识讲座',
                description: '邀请心血管专家为大家讲解心血管疾病的预防知识，包括饮食、运动、生活习惯等方面的建议。',
                image: 'https://img.freepik.com/free-vector/heart-disease-concept-illustration_114360-7487.jpg',
                tags: ['健康讲座', '心血管', '预防'],
                extraInfo: '讲座时间：每周三下午2:00-4:00，地点：医院学术报告厅，免费参加。',
                bgColor: '#e6f7ff',
                icon: '🎤',
                time: '每周三 14:00',
                location: '学术报告厅',
                status: '进行中'
            },
            {
                id: 2,
                title: '义诊活动',
                subtitle: '社区免费健康检查',
                description: '为社区居民提供免费的健康检查服务，包括血压、血糖、体重等基础检查项目。',
                image: 'https://img.freepik.com/free-vector/medical-checkup-concept-illustration_114360-7486.jpg',
                tags: ['义诊活动', '免费检查', '社区服务'],
                extraInfo: '活动时间：每月第一个周六上午9:00-12:00，地点：社区服务中心，无需预约。',
                bgColor: '#f6ffed',
                icon: '🏥',
                time: '每月第一个周六',
                location: '社区服务中心',
                status: '即将开始'
            },
            {
                id: 3,
                title: '健康跑',
                subtitle: '5公里健康跑活动',
                description: '组织5公里健康跑活动，倡导健康生活方式，增强体质，预防疾病。',
                image: 'https://img.freepik.com/free-vector/running-concept-illustration_114360-7488.jpg',
                tags: ['健康跑', '运动健身', '户外活动'],
                extraInfo: '活动时间：每周日早上7:00，地点：城市公园，报名费：20元（含保险）。',
                bgColor: '#fff7e6',
                icon: '🏃',
                time: '每周日 07:00',
                location: '城市公园',
                status: '报名中'
            },
            {
                id: 4,
                title: '营养咨询',
                subtitle: '个性化营养方案制定',
                description: '专业营养师为个人制定个性化的营养方案，帮助改善饮食习惯，预防营养相关疾病。',
                image: 'https://img.freepik.com/free-vector/nutrition-concept-illustration_114360-7489.jpg',
                tags: ['营养咨询', '个性化', '健康饮食'],
                extraInfo: '咨询时间：周一至周五上午9:00-12:00，下午2:00-5:00，需提前预约。',
                bgColor: '#f9f0ff',
                icon: '🥗',
                time: '工作日 09:00-17:00',
                location: '营养科',
                status: '可预约'
            },
            {
                id: 5,
                title: '心理健康',
                subtitle: '压力管理与情绪调节',
                description: '专业心理咨询师帮助大家学习压力管理技巧，掌握情绪调节方法，保持心理健康。',
                image: 'https://img.freepik.com/free-vector/mental-health-concept-illustration_114360-7490.jpg',
                tags: ['心理健康', '压力管理', '情绪调节'],
                extraInfo: '咨询时间：周二、周四下午2:00-6:00，地点：心理咨询室，免费咨询。',
                bgColor: '#fff2e8',
                icon: '🧠',
                time: '周二、周四 14:00',
                location: '心理咨询室',
                status: '免费咨询'
            },
            {
                id: 6,
                title: '中医养生',
                subtitle: '传统中医养生保健',
                description: '传承千年中医文化，提供针灸、推拿、艾灸等传统养生保健服务。',
                image: 'https://img.freepik.com/free-vector/traditional-chinese-medicine-concept-illustration_114360-7491.jpg',
                tags: ['中医养生', '传统医学', '保健服务'],
                extraInfo: '服务时间：周一至周日全天，地点：中医科，支持医保报销。',
                bgColor: '#f0f9ff',
                icon: '🌿',
                time: '全天开放',
                location: '中医科',
                status: '医保报销'
            },
            {
                id: 7,
                title: '儿童保健',
                subtitle: '儿童生长发育监测',
                description: '专业儿科医生为儿童提供生长发育监测、疫苗接种、健康指导等服务。',
                image: 'https://img.freepik.com/free-vector/child-health-concept-illustration_114360-7492.jpg',
                tags: ['儿童保健', '生长发育', '疫苗接种'],
                extraInfo: '服务时间：周一至周五上午8:00-12:00，下午2:00-6:00，周末上午半天。',
                bgColor: '#fff0f6',
                icon: '👶',
                time: '工作日 08:00-18:00',
                location: '儿科',
                status: '正常服务'
            },
            {
                id: 8,
                title: '老年护理',
                subtitle: '老年人健康管理服务',
                description: '为老年人提供专业的健康管理服务，包括慢性病管理、康复指导、生活护理等。',
                image: 'https://img.freepik.com/free-vector/elderly-care-concept-illustration_114360-7493.jpg',
                tags: ['老年护理', '健康管理', '慢性病管理'],
                extraInfo: '服务时间：24小时服务，地点：老年科病房，提供上门服务。',
                bgColor: '#f0f9ff',
                icon: '👴',
                time: '24小时服务',
                location: '老年科',
                status: '全天服务'
            }
        ];
        setActivitiesList(mockActivities);
    }, [fetchHealthArticles]);



    // 轮播图数据
    const [banners, setBanners] = useState([])
    // 常见病症数据
    const [commonDisease, setCommonDisease] = useState([])
    // 圆形图标底色
    const badgeColors = ['#FFCD6B', '#FF9F6B', '#FFA07A', '#34C3A0', '#FF9BB3', '#6CD3FF', '#F7B84B', '#8AB5FF']


    // 获取轮播图接口
    const getbanner = () => {
        // request.get("/health/share/v1/bannersShow").then((res) => {
        //     const list = Array.isArray(res.data?.result) ? res.data.result : []
        //     setBanners(list)
        // })
        //     .catch((error) => {
        //     console.error("获取banner失败:", error);
        //     Toast.show({ content: "获取banner失败，请稍后重试", duration: 2000 });
        // });
    }
    // 获取常见病症接口
    const getdisease = () => {
        // request.get("/health/share/knowledgeBase/v1/findDepartment").then((res) => {
        //     const list = Array.isArray(res.data?.result) ? res.data.result : []
        //     setCommonDisease(list)
        // })
    }
    // 获取咨询类型接口
    const getzxtype = () => {
        // request.get('/health/share/information/v1/findInformationPlateList').then((res) => {
        //     console.log(res);
        //     // setTabItems(res.data.result) // 暂时注释，变量未定义
        // })
    }
    // 获取对应的咨询列表
    const getzxlist = (id) => {
        // console.log(id);
        // request.get('/health/share/information/v1/findInformationList', {
        //     params: {
        //         plateId: id ? id : 1,
        //         page: 1,
        //         count: 5,
        //     }
        // }).then((res) => {
        //     console.log(res);
        //     // setData(res.data.result) // 暂时注释，变量未定义
        // })
    }
    useEffect(() => {
        // getbanner()
        // getdisease()
        // getzxtype()
        // getzxlist()
    }, []);

    // 下拉刷新处理：展示全局转圈，整体刷新列表
    const handleRefresh = useCallback(async () => {
        if (isRefreshing) return;
        try {
            setIsRefreshing(true);
            const start = Date.now();
            await fetchHealthArticles(1, false);
            const elapsed = Date.now() - start;
            if (elapsed < 600) {
                await new Promise(resolve => setTimeout(resolve, 600 - elapsed));
            }
            Toast.show({ content: '刷新成功', duration: 800 });
        } catch (e) {
            Toast.show({ content: '刷新失败，请重试', duration: 1200 });
        } finally {
            setIsRefreshing(false);
        }
    }, [fetchHealthArticles, isRefreshing]);


    return (
        <div className={style.box}>
            {/* 头部区域 */}
            <div className={style.header}>
                <img style={{ width: "100%" }} src={logo} alt="" />
                <div
                    onClick={() => navigate('/search')}
                    style={{
                        backgroundColor: '#f5f5f5',
                        borderRadius: '50px',
                        padding: '8px 16px',
                        display: 'flex',
                        alignItems: 'center',
                        cursor: 'pointer'
                    }}
                >
                    <SearchOutline style={{ marginRight: '8px', color: '#999' }} />
                    <span style={{ color: '#999', fontSize: '14px' }}>搜索疾病、症状、医生、医院...</span>
                </div>
                <div style={{ fontSize: "16px", textAlign: "center", cursor: 'pointer' }} onClick={() => console.log('健康值点击')}>
                    <FireFill style={{ color: "#ff7950" }} />
                    <p style={{ fontSize: "10px", margin: 0 }}>健康值</p>
                    <div style={{ fontSize: '10px', color: '#999' }}>0</div>
                </div>
            </div>
            {/* 轮播图区域 */}
            <div className={style.banner}>
                <Swiper
                    indicator={(total, current) => (
                        <div style={{
                            position: 'absolute',
                            left: '50%',
                            bottom: '16px',
                            transform: 'translateX(-50%)',
                            zIndex: 10,
                            display: 'flex',
                            gap: '8px',
                            alignItems: 'center'
                        }}>
                            {Array.from({ length: total }).map((_, index) => (
                                <div
                                    key={index}
                                    style={{
                                        width: '8px',
                                        height: '8px',
                                        backgroundColor: index === current ? '#ffffff' : 'rgba(255, 255, 255, 0.5)',
                                        borderRadius: '50%',
                                        transition: 'all 0.3s ease',
                                        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
                                    }}
                                />
                            ))}
                        </div>
                    )}
                >
                    {
                        banners.map((item, index) => {
                            return <Swiper.Item key={index} style={{ height: '140px' }}>
                                <div
                                    onClick={() => navigate('/detail', {
                                        state: {
                                            title: item.title || '专题活动',
                                            subtitle: item.subtitle || '了解更多活动信息',
                                            image: item.imageUrl,
                                            description: item.description || '这里是轮播图的详细内容描述，包含重要的专题活动和医疗信息。',
                                            tags: ['健康', '医疗', '资讯'],
                                            extraInfo: '轮播图内容的相关补充信息，帮助用户更好地了解内容。'
                                        }
                                    })}
                                    style={{
                                        cursor: 'pointer',
                                        width: '100%',
                                        height: '100%',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        padding: '8px'
                                    }}
                                >
                                    <img
                                        style={{
                                            width: '100%',
                                            height: '100%',
                                            borderRadius: '12px',
                                            objectFit: 'cover',
                                            objectPosition: 'center'
                                        }}
                                        src={item.imageUrl}
                                        alt={item.title || '轮播图'}
                                    />
                                </div>
                            </Swiper.Item>
                        })
                    }
                </Swiper>
            </div>
                        {/* 医院轮播图 */}
            <Swiper
                style={{ height: '160px' }}
                autoplay={true}
                autoplayInterval={3000}
                loop={true}
                indicator={(total, current) => (
                        <div style={{
                            position: 'absolute',
                            left: '50%',
                            bottom: '12px',
                            transform: 'translateX(-50%)',
                            zIndex: 10,
                            display: 'flex',
                            gap: '8px',
                            alignItems: 'center'
                        }}>
                            {Array.from({ length: total }).map((_, index) => (
                                <div
                                    key={index}
                                    style={{
                                        width: '8px',
                                        height: '8px',
                                        backgroundColor: index === current ? '#1890ff' : 'rgba(24, 144, 255, 0.3)',
                                        borderRadius: '50%',
                                        transition: 'all 0.3s ease'
                                    }}
                                />
                            ))}
                        </div>
                    )}
                >
                    <Swiper.Item>
                        <div
                            style={{
                                width: '100%',
                                height: '100%',
                                borderRadius: '12px',
                                overflow: 'hidden',
                                cursor: 'pointer',
                                position: 'relative'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '现代化医院大楼',
                                    subtitle: '先进的医疗设施与环境',
                                    image: 'https://img.freepik.com/free-vector/hospital-building-concept-illustration_114360-8449.jpg',
                                    description: '我们医院拥有现代化的医疗大楼，配备先进的医疗设备和舒适的就医环境，为患者提供优质的医疗服务。',
                                    tags: ['医院环境', '医疗设施', '现代化'],
                                    extraInfo: '医院大楼采用现代化设计理念，环境优美，设施完善，为患者和医护人员提供良好的工作与就医环境。'
                                }
                            })}
                        >
                            <img
                                src="https://img.freepik.com/free-vector/hospital-building-concept-illustration_114360-8449.jpg"
                                alt="现代化医院大楼"
                                style={{
                                    width: '100%',
                                    height: '100%',
                                    objectFit: 'cover'
                                }}
                            />
                            <div style={{
                                position: 'absolute',
                                bottom: 0,
                                left: 0,
                                right: 0,
                                background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                                padding: '20px 16px 16px',
                                color: '#fff'
                            }}>
                                <div style={{
                                    fontSize: '16px',
                                    fontWeight: 'bold',
                                    marginBottom: '4px'
                                }}>现代化医院大楼</div>
                                <div style={{
                                    fontSize: '12px',
                                    opacity: 0.9
                                }}>先进的医疗设施与环境</div>
                            </div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div
                            style={{
                                width: '100%',
                                height: '100%',
                                borderRadius: '12px',
                                overflow: 'hidden',
                                cursor: 'pointer',
                                position: 'relative'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '急诊科抢救室',
                                    subtitle: '24小时紧急医疗救助',
                                    image: 'https://img.freepik.com/free-vector/emergency-room-concept-illustration_114360-7485.jpg',
                                    description: '急诊科抢救室配备先进的抢救设备，医护人员24小时待命，为急危重症患者提供及时有效的救治。',
                                    tags: ['急诊科', '抢救室', '紧急救助'],
                                    extraInfo: '急诊科抢救室拥有完善的急救设备，包括呼吸机、除颤仪、监护仪等，确保患者得到最及时的救治。'
                                }
                            })}
                        >
                            <img
                                src="https://img.freepik.com/free-vector/emergency-room-concept-illustration_114360-7485.jpg"
                                alt="急诊科抢救室"
                                style={{
                                    width: '100%',
                                    height: '100%',
                                    objectFit: 'cover'
                                }}
                            />
                            <div style={{
                                position: 'absolute',
                                bottom: 0,
                                left: 0,
                                right: 0,
                                background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                                padding: '20px 16px 16px',
                                color: '#fff'
                            }}>
                                <div style={{
                                    fontSize: '16px',
                                    fontWeight: 'bold',
                                    marginBottom: '4px'
                                }}>急诊科抢救室</div>
                                <div style={{
                                    fontSize: '12px',
                                    opacity: 0.9
                                }}>24小时紧急医疗救助</div>
                            </div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div
                            style={{
                                width: '100%',
                                height: '100%',
                                borderRadius: '12px',
                                overflow: 'hidden',
                                cursor: 'pointer',
                                position: 'relative'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '手术室',
                                    subtitle: '精密手术设备与专业团队',
                                    image: 'https://img.freepik.com/free-vector/operating-room-concept-illustration_114360-7484.jpg',
                                    description: '手术室配备国际先进的手术设备，由经验丰富的外科医生和护理团队组成，确保手术安全顺利进行。',
                                    tags: ['手术室', '手术设备', '专业团队'],
                                    extraInfo: '手术室采用层流净化技术，配备高清腹腔镜、超声刀、电刀等先进设备，为各类手术提供安全保障。'
                                }
                            })}
                        >
                            <img
                                src="https://img.freepik.com/free-vector/operating-room-concept-illustration_114360-7484.jpg"
                                alt="手术室"
                                style={{
                                    width: '100%',
                                    height: '100%',
                                    objectFit: 'cover'
                                }}
                            />
                            <div style={{
                                position: 'absolute',
                                bottom: 0,
                                left: 0,
                                right: 0,
                                background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                                padding: '20px 16px 16px',
                                color: '#fff'
                            }}>
                                <div style={{
                                    fontSize: '16px',
                                    fontWeight: 'bold',
                                    marginBottom: '4px'
                                }}>手术室</div>
                                <div style={{
                                    fontSize: '12px',
                                    opacity: 0.9
                                }}>精密手术设备与专业团队</div>
                            </div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div
                            style={{
                                width: '100%',
                                height: '100%',
                                borderRadius: '12px',
                                overflow: 'hidden',
                                cursor: 'pointer',
                                position: 'relative'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '医学影像科',
                                    subtitle: '先进的影像诊断技术',
                                    image: 'https://img.freepik.com/free-vector/medical-imaging-concept-illustration_114360-7483.jpg',
                                    description: '医学影像科拥有CT、MRI、DR、超声等先进设备，为临床诊断提供准确的影像学依据。',
                                    tags: ['医学影像', '影像诊断', '先进设备'],
                                    extraInfo: '医学影像科配备64排螺旋CT、3.0T核磁共振、数字化X线摄影等高端设备，图像清晰，诊断准确。'
                                }
                            })}
                        >
                            <img
                                src="https://img.freepik.com/free-vector/medical-imaging-concept-illustration_114360-7483.jpg"
                                alt="医学影像科"
                                style={{
                                    width: '100%',
                                    height: '100%',
                                    objectFit: 'cover'
                                }}
                            />
                            <div style={{
                                position: 'absolute',
                                bottom: 0,
                                left: 0,
                                right: 0,
                                background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                                padding: '20px 16px 16px',
                                color: '#fff'
                            }}>
                                <div style={{
                                    fontSize: '16px',
                                    fontWeight: 'bold',
                                    marginBottom: '4px'
                                }}>医学影像科</div>
                                <div style={{
                                    fontSize: '12px',
                                    opacity: 0.9
                                }}>先进的影像诊断技术</div>
                            </div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div
                            style={{
                                width: '100%',
                                height: '100%',
                                borderRadius: '12px',
                                overflow: 'hidden',
                                cursor: 'pointer',
                                position: 'relative'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '康复治疗中心',
                                    subtitle: '专业康复设备与治疗',
                                    image: 'https://img.freepik.com/free-vector/rehabilitation-concept-illustration_114360-7482.jpg',
                                    description: '康复治疗中心配备专业的康复设备，由康复医师和治疗师组成专业团队，为患者提供个性化康复方案。',
                                    tags: ['康复治疗', '康复设备', '专业团队'],
                                    extraInfo: '康复治疗中心拥有运动治疗、物理治疗、作业治疗等专业设备，帮助患者恢复功能，提高生活质量。'
                                }
                            })}
                        >
                            <img
                                src="https://img.freepik.com/free-vector/rehabilitation-concept-illustration_114360-7482.jpg"
                                alt="康复治疗中心"
                                style={{
                                    width: '100%',
                                    height: '100%',
                                    objectFit: 'cover'
                                }}
                            />
                            <div style={{
                                position: 'absolute',
                                bottom: 0,
                                left: 0,
                                right: 0,
                                background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                                padding: '20px 16px 16px',
                                color: '#fff'
                            }}>
                                <div style={{
                                    fontSize: '16px',
                                    fontWeight: 'bold',
                                    marginBottom: '4px'
                                }}>康复治疗中心</div>
                                <div style={{
                                    fontSize: '12px',
                                    opacity: 0.9
                                }}>专业康复设备与治疗</div>
                            </div>
                        </div>
                    </Swiper.Item>
                </Swiper>
            {/* 快速服务宫格 */}
            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(4, 1fr)',
                gap: '12px',
                alignItems: 'center',
                margin: '0 16px 8px',
                padding: '10px 0'
            }}>
                    <div
                        style={{ textAlign: 'center', cursor: 'pointer' }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '视频咨询',
                                subtitle: '专业医生在线视频问诊',
                                image: 'https://img.freepik.com/free-vector/doctor-nurses-special-equipment_23-2148980723.jpg',
                                description: '视频咨询是一种便捷的医疗服务方式，患者可以通过视频与专业医生进行实时交流，获得专业的医疗建议和诊断。',
                                tags: ['视频咨询', '在线问诊', '医疗服务'],
                                extraInfo: '支持多种疾病咨询，包括内科、外科、儿科、妇科等科室，24小时在线服务。'
                            }
                        })}
                    >
                        <div style={{
                            width: 'clamp(40px, 13vw, 56px)',
                            height: 'clamp(40px, 13vw, 56px)',
                            backgroundColor: '#ff9f6b',
                            borderRadius: '50%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            margin: '0 auto 6px',
                            boxShadow: '0 2px 6px rgba(0,0,0,0.06)'
                        }}>
                            <span style={{ fontSize: '20px', color: '#fff' }}>📞</span>
                        </div>
                        <div style={{ fontSize: '12px', color: '#333' }}>视频咨询</div>
                    </div>
                    <div
                        style={{ textAlign: 'center', cursor: 'pointer' }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '找医生',
                                subtitle: '专业医生资源库',
                                image: 'https://img.freepik.com/free-vector/doctor-concept-illustration_114360-3993.jpg',
                                description: '我们拥有全国各地的专业医生资源，涵盖各个科室和专科，帮助您找到最适合的医生进行诊疗。',
                                tags: ['找医生', '医生资源', '专科医生'],
                                extraInfo: '支持按科室、地区、职称等条件筛选，提供医生详细信息和患者评价。'
                            }
                        })}
                    >
                        <div style={{
                            width: 'clamp(40px, 13vw, 56px)',
                            height: 'clamp(40px, 13vw, 56px)',
                            backgroundColor: '#34c3a0',
                            borderRadius: '50%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            margin: '0 auto 6px',
                            boxShadow: '0 2px 6px rgba(0,0,0,0.06)'
                        }}>
                            <span style={{ fontSize: '20px', color: '#fff' }}>👨‍⚕️</span>
                        </div>
                        <div style={{ fontSize: '12px', color: '#333' }}>找医生</div>
                    </div>
                    <div
                        style={{ textAlign: 'center', cursor: 'pointer' }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '找医院',
                                subtitle: '全国优质医院资源',
                                image: 'https://img.freepik.com/free-vector/hospital-building-concept-illustration_114360-8449.jpg',
                                description: '提供全国各地的优质医院信息，包括三甲医院、专科医院、民营医院等，帮助您选择最适合的医疗机构。',
                                tags: ['找医院', '医院资源', '医疗机构'],
                                extraInfo: '支持按地区、等级、专科等条件筛选，提供医院详细信息、科室介绍和预约服务。'
                            }
                        })}
                    >
                        <div style={{
                            width: 'clamp(40px, 13vw, 56px)',
                            height: 'clamp(40px, 13vw, 56px)',
                            backgroundColor: '#f7b84b',
                            borderRadius: '50%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            margin: '0 auto 6px',
                            boxShadow: '0 2px 6px rgba(0,0,0,0.06)'
                        }}>
                            <span style={{ fontSize: '20px', color: '#fff' }}>➕</span>
                        </div>
                        <div style={{ fontSize: '12px', color: '#333' }}>找医院</div>
                    </div>
                    <div
                        style={{ textAlign: 'center', cursor: 'pointer' }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '全国献血地',
                                subtitle: '爱心献血，拯救生命',
                                image: 'https://img.freepik.com/free-vector/blood-donation-concept-illustration_114360-4307.jpg',
                                description: '提供全国各地的献血点信息，包括固定献血屋、流动献血车、医院献血点等，方便爱心人士参与无偿献血。',
                                tags: ['献血', '爱心公益', '无偿献血'],
                                extraInfo: '支持按地区查询，提供献血点详细地址、联系电话和营业时间等信息。'
                            }
                        })}
                    >
                        <div style={{
                            width: 'clamp(40px, 13vw, 56px)',
                            height: 'clamp(40px, 13vw, 56px)',
                            backgroundColor: '#8ab5ff',
                            borderRadius: '50%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            margin: '0 auto 6px',
                            boxShadow: '0 2px 6px rgba(0,0,0,0.06)'
                        }}>
                            <span style={{ fontSize: '20px', color: '#fff' }}>📍</span>
                        </div>
                        <div style={{ fontSize: '12px', color: '#333' }}>献血地</div>
                    </div>
                </div>

            {/* 常见病症分类 */}
            <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                gap: 'clamp(2px, 1vw, 8px)',
                flexWrap: 'nowrap',
                overflowX: 'auto',
                margin: '0 16px 16px',
                padding: '5px 0'
            }}>
                    {/* 皮肤科 */}
                    <div
                        style={{
                            flex: 1,
                            minWidth: 'clamp(50px, 12vw, 70px)',
                            textAlign: 'center',
                            cursor: 'pointer',
                            padding: 'clamp(8px, 2vw, 12px) clamp(2px, 0.5vw, 4px)',
                            borderRadius: '8px',
                            transition: 'all 0.3s ease'
                        }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '皮肤科',
                                subtitle: '皮肤疾病专科诊疗',
                                image: 'https://img.freepik.com/free-vector/skin-care-concept-illustration_114360-7898.jpg',
                                description: '皮肤科专门治疗各种皮肤疾病，包括皮炎、湿疹、痤疮、皮肤过敏等常见问题。',
                                tags: ['皮肤科', '皮肤疾病', '专科诊疗'],
                                extraInfo: '提供皮肤疾病诊断、治疗、美容护理等专业服务。'
                            }
                        })}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff2f0';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = 'transparent';
                        }}
                    >
                        <div style={{
                            width: 'clamp(35px, 10vw, 48px)',
                            height: 'clamp(35px, 10vw, 48px)',
                            margin: '0 auto clamp(4px, 1.5vw, 8px)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            <div style={{
                                width: '100%',
                                height: '100%',
                                background: '#ffffff',
                                border: '2px solid #f0f0f0',
                                borderRadius: '50%',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
                            }}>
                                <span style={{ fontSize: 'clamp(16px, 5vw, 22px)' }}>🩹</span>
                            </div>
                        </div>
                        <div style={{
                            fontSize: 'clamp(10px, 3vw, 14px)',
                            color: '#333',
                            fontWeight: '500',
                            lineHeight: '1.2'
                        }}>皮肤</div>
                    </div>
                    
                    {/* 脱发 */}
                    <div
                        style={{
                            flex: 1,
                            minWidth: 'clamp(50px, 12vw, 70px)',
                            textAlign: 'center',
                            cursor: 'pointer',
                            padding: 'clamp(8px, 2vw, 12px) clamp(2px, 0.5vw, 4px)',
                            borderRadius: '8px',
                            transition: 'all 0.3s ease'
                        }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '脱发治疗',
                                subtitle: '专业脱发诊疗服务',
                                image: 'https://img.freepik.com/free-vector/hair-loss-concept-illustration_114360-7899.jpg',
                                description: '专业治疗各种脱发问题，包括雄激素性脱发、斑秃、休止期脱发等。',
                                tags: ['脱发治疗', '毛发科', '专业诊疗'],
                                extraInfo: '提供脱发原因分析、个性化治疗方案、植发手术等服务。'
                            }
                        })}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff2f0';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = 'transparent';
                        }}
                    >
                        <div style={{
                            width: 'clamp(35px, 10vw, 48px)',
                            height: 'clamp(35px, 10vw, 48px)',
                            margin: '0 auto clamp(4px, 1.5vw, 8px)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            <div style={{
                                width: '100%',
                                height: '100%',
                                background: '#ffffff',
                                border: '2px solid #f0f0f0',
                                borderRadius: '50%',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
                            }}>
                                <span style={{ fontSize: 'clamp(16px, 5vw, 22px)' }}>💇‍♀️</span>
                            </div>
                        </div>
                        <div style={{
                            fontSize: 'clamp(10px, 3vw, 14px)',
                            color: '#333',
                            fontWeight: '500',
                            lineHeight: '1.2'
                        }}>脱发</div>
                    </div>
                    
                    {/* 中医 */}
                    <div
                        style={{
                            flex: 1,
                            minWidth: 'clamp(50px, 12vw, 70px)',
                            textAlign: 'center',
                            cursor: 'pointer',
                            padding: 'clamp(8px, 2vw, 12px) clamp(2px, 0.5vw, 4px)',
                            borderRadius: '8px',
                            transition: 'all 0.3s ease'
                        }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '中医科',
                                subtitle: '传统中医诊疗服务',
                                image: 'https://img.freepik.com/free-vector/traditional-chinese-medicine-concept-illustration_114360-7891.jpg',
                                description: '传承千年中医文化，提供针灸、推拿、艾灸、中药等传统治疗方法。',
                                tags: ['中医科', '传统医学', '针灸推拿'],
                                extraInfo: '提供中医诊断、中药调理、针灸治疗、推拿按摩等服务。'
                            }
                        })}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff2f0';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = 'transparent';
                        }}
                    >
                        <div style={{
                            width: 'clamp(35px, 10vw, 48px)',
                            height: 'clamp(35px, 10vw, 48px)',
                            margin: '0 auto clamp(4px, 1.5vw, 8px)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            <div style={{
                                width: '100%',
                                height: '100%',
                                background: '#ffffff',
                                border: '2px solid #f0f0f0',
                                borderRadius: '50%',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
                            }}>
                                <span style={{ fontSize: 'clamp(16px, 5vw, 22px)' }}>🏺</span>
                            </div>
                        </div>
                        <div style={{
                            fontSize: 'clamp(10px, 3vw, 14px)',
                            color: '#333',
                            fontWeight: '500',
                            lineHeight: '1.2'
                        }}>中医</div>
                    </div>
                    
                    {/* 风湿病 */}
                    <div
                        style={{
                            flex: 1,
                            minWidth: 'clamp(50px, 12vw, 70px)',
                            textAlign: 'center',
                            cursor: 'pointer',
                            padding: 'clamp(8px, 2vw, 12px) clamp(2px, 0.5vw, 4px)',
                            borderRadius: '8px',
                            transition: 'all 0.3s ease'
                        }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '风湿科',
                                subtitle: '风湿免疫疾病诊疗',
                                image: 'https://img.freepik.com/free-vector/rheumatism-concept-illustration_114360-7900.jpg',
                                description: '专业治疗类风湿关节炎、系统性红斑狼疮、强直性脊柱炎等风湿免疫疾病。',
                                tags: ['风湿科', '免疫疾病', '关节炎'],
                                extraInfo: '提供风湿疾病诊断、免疫治疗、康复指导等服务。'
                            }
                        })}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff2f0';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = 'transparent';
                        }}
                    >
                        <div style={{
                            width: 'clamp(35px, 10vw, 48px)',
                            height: 'clamp(35px, 10vw, 48px)',
                            margin: '0 auto clamp(4px, 1.5vw, 8px)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            <div style={{
                                width: '100%',
                                height: '100%',
                                background: '#ffffff',
                                border: '2px solid #f0f0f0',
                                borderRadius: '50%',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
                            }}>
                                <span style={{ fontSize: 'clamp(16px, 5vw, 22px)' }}>🦴</span>
                            </div>
                        </div>
                        <div style={{
                            fontSize: 'clamp(10px, 3vw, 14px)',
                            color: '#333',
                            fontWeight: '500',
                            lineHeight: '1.2'
                        }}>风湿病</div>
                    </div>
                    
                    {/* 痛风 */}
                    <div
                        style={{
                            flex: 1,
                            minWidth: 'clamp(50px, 12vw, 70px)',
                            textAlign: 'center',
                            cursor: 'pointer',
                            padding: 'clamp(8px, 2vw, 12px) clamp(2px, 0.5vw, 4px)',
                            borderRadius: '8px',
                            transition: 'all 0.3s ease'
                        }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '痛风科',
                                subtitle: '痛风专业诊疗服务',
                                image: 'https://img.freepik.com/free-vector/gout-concept-illustration_114360-7901.jpg',
                                description: '专业治疗痛风及相关代谢性疾病，提供个性化的饮食和用药指导。',
                                tags: ['痛风科', '代谢疾病', '尿酸控制'],
                                extraInfo: '提供痛风诊断、尿酸监测、饮食指导、药物治疗等服务。'
                            }
                        })}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff2f0';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = 'transparent';
                        }}
                    >
                        <div style={{
                            width: 'clamp(35px, 10vw, 48px)',
                            height: 'clamp(35px, 10vw, 48px)',
                            margin: '0 auto clamp(4px, 1.5vw, 8px)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            <div style={{
                                width: '100%',
                                height: '100%',
                                background: '#ffffff',
                                border: '2px solid #f0f0f0',
                                borderRadius: '50%',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
                            }}>
                                <span style={{ fontSize: 'clamp(16px, 5vw, 22px)' }}>🦶</span>
                            </div>
                        </div>
                        <div style={{
                            fontSize: 'clamp(10px, 3vw, 14px)',
                            color: '#333',
                            fontWeight: '500',
                            lineHeight: '1.2'
                        }}>痛风</div>
                    </div>
                    
                    {/* 全部 */}
                    <div
                        style={{
                            flex: 1,
                            minWidth: 'clamp(50px, 12vw, 70px)',
                            textAlign: 'center',
                            cursor: 'pointer',
                            padding: 'clamp(8px, 2vw, 12px) clamp(2px, 0.5vw, 4px)',
                            borderRadius: '8px',
                            transition: 'all 0.3s ease'
                        }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '全部科室',
                                subtitle: '综合医疗科室导航',
                                image: 'https://img.freepik.com/free-vector/hospital-concept-illustration_114360-8449.jpg',
                                description: '查看医院所有科室信息，包括内科、外科、儿科、妇科等各个专业科室。',
                                tags: ['全部科室', '综合医疗', '科室导航'],
                                extraInfo: '提供完整的科室介绍、专家信息、预约服务等。'
                            }
                        })}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff2f0';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = 'transparent';
                        }}
                    >
                        <div style={{
                            width: 'clamp(35px, 10vw, 48px)',
                            height: 'clamp(35px, 10vw, 48px)',
                            margin: '0 auto clamp(4px, 1.5vw, 8px)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            <div style={{
                                width: '100%',
                                height: '100%',
                                background: '#ffffff',
                                border: '2px solid #f0f0f0',
                                borderRadius: '50%',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
                            }}>
                                <span style={{ fontSize: 'clamp(16px, 5vw, 22px)' }}>🔲</span>
                            </div>
                        </div>
                        <div style={{
                            fontSize: 'clamp(10px, 3vw, 14px)',
                            color: '#333',
                            fontWeight: '500',
                            lineHeight: '1.2'
                        }}>全部</div>
                    </div>
                </div>

            {/* 医院服务轮播图 */}
            <div style={{
                margin: '0 16px 12px',
                backgroundColor: '#f8f9fa',
                borderRadius: '12px',
                padding: '12px',
                position: 'relative',
                overflow: 'hidden'
            }}>
                <Swiper
                    style={{ height: '90px' }}
                    autoplay={true}
                    autoplayInterval={4000}
                    loop={true}
                    indicator={(total, current) => (
                        <div style={{
                            position: 'absolute',
                            left: '50%',
                            bottom: '8px',
                            transform: 'translateX(-50%)',
                            zIndex: 10,
                            display: 'flex',
                            gap: '6px',
                            alignItems: 'center'
                        }}>
                            {Array.from({ length: total }).map((_, index) => (
                                <div
                                    key={index}
                                    style={{
                                        width: '8px',
                                        height: '4px',
                                        backgroundColor: index === current ? '#1890ff' : 'rgba(24, 144, 255, 0.3)',
                                        borderRadius: '2px',
                                        transition: 'all 0.3s ease'
                                    }}
                                />
                            ))}
                        </div>
                    )}
                >
                    <Swiper.Item>
                        <div
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                padding: '10px',
                                background: 'linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%)',
                                borderRadius: '12px',
                                cursor: 'pointer',
                                border: '1px solid #bae7ff',
                                position: 'relative',
                                overflow: 'hidden'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '我为群众办实事',
                                    subtitle: '千名医师讲健康',
                                    image: 'https://img.freepik.com/free-vector/doctor-concept-illustration_114360-3993.jpg',
                                    description: '我们医院积极响应"我为群众办实事"的号召，组织千名医师开展健康讲座，为广大群众提供实用的健康知识和医疗服务。',
                                    tags: ['健康讲座', '医师服务', '群众健康'],
                                    extraInfo: '定期举办健康讲座，涵盖常见疾病预防、健康生活方式、中医养生等多个方面，让健康知识走进千家万户。'
                                }
                            })}
                        >
                            <div style={{ flex: 1, minWidth: 0 }}>
                                <div style={{
                                    fontSize: '14px',
                                    fontWeight: 'bold',
                                    color: '#1890ff',
                                    marginBottom: '4px',
                                    lineHeight: '1.2'
                                }}>我为群众办实事</div>
                                <div style={{
                                    fontSize: '13px',
                                    fontWeight: 'bold',
                                    color: '#333',
                                    marginBottom: '4px',
                                    lineHeight: '1.2'
                                }}>千名医师讲健康</div>
                                <div style={{
                                    fontSize: '11px',
                                    color: '#666',
                                    lineHeight: '1.1'
                                }}>带你走进医院，了解健康</div>
                            </div>
                            <div style={{
                                width: '50px',
                                height: '50px',
                                borderRadius: '50%',
                                overflow: 'hidden',
                                marginLeft: '12px',
                                flexShrink: 0,
                                border: '2px solid #bae7ff',
                                backgroundColor: '#fff'
                            }}>
                                <img
                                    src="https://img.freepik.com/free-vector/doctor-concept-illustration_114360-3993.jpg"
                                    alt="医师服务"
                                    style={{
                                        width: '100%',
                                        height: '100%',
                                        objectFit: 'cover'
                                    }}
                                />
                            </div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                padding: '10px',
                                background: 'linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%)',
                                borderRadius: '12px',
                                cursor: 'pointer',
                                border: '1px solid #b7eb8f',
                                position: 'relative',
                                overflow: 'hidden'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '优质医疗服务',
                                    subtitle: '专业团队守护健康',
                                    image: 'https://img.freepik.com/free-vector/hospital-building-concept-illustration_114360-8449.jpg',
                                    description: '我们医院拥有专业的医疗团队和先进的医疗设备，为患者提供优质的医疗服务，守护每一个家庭的健康。',
                                    tags: ['医疗服务', '专业团队', '健康守护'],
                                    extraInfo: '医院配备各科室专业医师，采用先进的诊疗技术，为患者提供全面、专业、贴心的医疗服务。'
                                }
                            })}
                        >
                            <div style={{ flex: 1, minWidth: 0 }}>
                                <div style={{
                                    fontSize: '14px',
                                    fontWeight: 'bold',
                                    color: '#52c41a',
                                    marginBottom: '4px',
                                    lineHeight: '1.2'
                                }}>优质医疗服务</div>
                                <div style={{
                                    fontSize: '13px',
                                    fontWeight: 'bold',
                                    color: '#333',
                                    marginBottom: '4px',
                                    lineHeight: '1.2'
                                }}>专业团队守护健康</div>
                                <div style={{
                                    fontSize: '11px',
                                    color: '#666',
                                    lineHeight: '1.1'
                                }}>用心服务，用爱守护</div>
                            </div>
                            <div style={{
                                width: '50px',
                                height: '50px',
                                borderRadius: '50%',
                                overflow: 'hidden',
                                marginLeft: '12px',
                                flexShrink: 0,
                                border: '2px solid #b7eb8f',
                                backgroundColor: '#fff'
                            }}>
                                <img
                                    src="https://img.freepik.com/free-vector/hospital-building-concept-illustration_114360-8449.jpg"
                                    alt="医疗服务"
                                    style={{
                                        width: '100%',
                                        height: '100%',
                                        objectFit: 'cover'
                                    }}
                                />
                            </div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                padding: '10px',
                                background: 'linear-gradient(135deg, #fff7e6 0%, #fff2e8 100%)',
                                borderRadius: '12px',
                                cursor: 'pointer',
                                border: '1px solid #ffd591',
                                position: 'relative',
                                overflow: 'hidden'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '24小时急诊服务',
                                    subtitle: '生命守护不间断',
                                    image: 'https://img.freepik.com/free-vector/emergency-room-concept-illustration_114360-7485.jpg',
                                    description: '我们医院急诊科24小时开放，配备先进的急救设备和专业的急救团队，为急危重症患者提供及时有效的救治。',
                                    tags: ['急诊服务', '24小时', '生命守护'],
                                    extraInfo: '急诊科拥有完善的急救体系，包括院前急救、院内抢救、重症监护等，确保患者得到最及时的救治。'
                                }
                            })}
                        >
                            <div style={{ flex: 1, minWidth: 0 }}>
                                <div style={{
                                    fontSize: '14px',
                                    fontWeight: 'bold',
                                    color: '#fa8c16',
                                    marginBottom: '4px',
                                    lineHeight: '1.2'
                                }}>24小时急诊服务</div>
                                <div style={{
                                    fontSize: '13px',
                                    fontWeight: 'bold',
                                    color: '#333',
                                    marginBottom: '4px',
                                    lineHeight: '1.2'
                                }}>生命守护不间断</div>
                                <div style={{
                                    fontSize: '11px',
                                    color: '#666',
                                    lineHeight: '1.1'
                                }}>随时待命，守护生命</div>
                            </div>
                            <div style={{
                                width: '50px',
                                height: '50px',
                                borderRadius: '50%',
                                overflow: 'hidden',
                                marginLeft: '12px',
                                flexShrink: 0,
                                border: '2px solid #ffd591',
                                backgroundColor: '#fff'
                            }}>
                                <img
                                    src="https://img.freepik.com/free-vector/emergency-room-concept-illustration_114360-7485.jpg"
                                    alt="急诊服务"
                                    style={{
                                        width: '100%',
                                        height: '100%',
                                        objectFit: 'cover'
                                    }}
                                />
                            </div>
                        </div>
                    </Swiper.Item>
                </Swiper>
            </div>

            {/* 专题活动轮播 */}
            <div style={{
                margin: '0 16px 16px',
                backgroundColor: '#fff',
                borderRadius: '12px',
                padding: '20px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
                <div style={{
                    fontSize: '18px',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                    color: '#333',
                    display: 'flex',
                    alignItems: 'center'
                }}>
                    <div style={{
                        width: '4px',
                        height: '20px',
                        backgroundColor: '#722ed1',
                        marginRight: '12px',
                        borderRadius: '2px'
                    }}></div>
                    专题活动
                </div>
                <Swiper style={{ height: '120px' }}>
                    <Swiper.Item>
                        <div
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                padding: '10px',
                                backgroundColor: '#f8f9fa',
                                borderRadius: '8px',
                                cursor: 'pointer'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '疫情防控最新指南',
                                    subtitle: '科学防控，保护健康',
                                    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.67d27dc1dd03cdcf35f34c0f0c0e7bd2?rik=wqMSW9xLcK910Q&riu=http%3a%2f%2fwww.51kzt.com%2fimages%2fyiqing%2fbanner.jpg&ehk=c39zQ8kucF%2fVsudtkGFUxP7i3opENVitNHOqmSvD2y4%3d&risl=&pid=ImgRaw&r=0',
                                    description: '随着疫情形势的变化，我们需要及时了解最新的防控措施和注意事项。本指南将为您提供科学的防控建议，帮助您和家人在疫情期间保持健康。',
                                    tags: ['疫情防控', '健康指南', '防护措施'],
                                    extraInfo: '包含个人防护、居家消毒、外出注意事项等详细内容，定期更新最新防控政策。'
                                }
                            })}
                        >
                            <img
                                src='https://ts1.tc.mm.bing.net/th/id/R-C.67d27dc1dd03cdcf35f34c0f0c0e7bd2?rik=wqMSW9xLcK910Q&riu=http%3a%2f%2fwww.51kzt.com%2fimages%2fyiqing%2fbanner.jpg&ehk=c39zQ8kucF%2fVsudtkGFUxP7i3opENVitNHOqmSvD2y4%3d&risl=&pid=ImgRaw&r=0'
                                alt=""
                                style={{
                                    width: '80px',
                                    height: '60px',
                                    borderRadius: '8px',
                                    marginRight: '16px'
                                }}
                            />
                            <div style={{ flex: 1 }}>
                                <div style={{
                                    fontSize: '14px',
                                    fontWeight: 'bold',
                                    color: '#333',
                                    marginBottom: '8px',
                                    lineHeight: '1.4'
                                }}>疫情防控最新指南</div>
                                <div style={{
                                    fontSize: '12px',
                                    color: '#666',
                                    lineHeight: '1.4'
                                }}>了解最新的疫情防控措施和注意事项</div>
                            </div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                padding: '10px',
                                backgroundColor: '#f8f9fa',
                                borderRadius: '8px',
                                cursor: 'pointer'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: '健康生活方式指南',
                                    subtitle: '科学的生活方式，让健康更简单',
                                    image: 'https://img.shetu66.com/2023/09/13/1694590813460216.png',
                                    description: '健康的生活方式是预防疾病、保持身体活力的重要基础。本指南将为您提供科学的饮食、运动、作息等生活建议，帮助您建立健康的生活习惯。',
                                    tags: ['健康生活', '生活方式', '健康指南'],
                                    extraInfo: '涵盖营养搭配、运动健身、心理健康、睡眠质量等多个方面的专业建议。'
                                }
                            })}
                        >
                            <img
                                src='https://img.shetu66.com/2023/09/13/1694590813460216.png'
                                alt=""
                                style={{
                                    width: '80px',
                                    height: '60px',
                                    borderRadius: '8px',
                                    marginRight: '16px'
                                }}
                            />
                            <div style={{ flex: 1 }}>
                                <div style={{
                                    fontSize: '14px',
                                    fontWeight: 'bold',
                                    color: '#333',
                                    marginBottom: '8px',
                                    lineHeight: '1.4'
                                }}>健康生活方式指南</div>
                                <div style={{
                                    fontSize: '12px',
                                    color: '#666',
                                    lineHeight: '1.4'
                                }}>科学的生活方式，让健康更简单</div>
                            </div>
                        </div>
                    </Swiper.Item>
                </Swiper>
            </div>

            {/* 专题活动列表 */}
            <div style={{
                margin: '0 16px 16px',
                backgroundColor: '#fff',
                borderRadius: '12px',
                padding: '20px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
                <div style={{
                    fontSize: '18px',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                    color: '#333',
                    display: 'flex',
                    alignItems: 'center'
                }}>
                    <div style={{
                        width: '4px',
                        height: '20px',
                        backgroundColor: '#722ed1',
                        marginRight: '12px',
                        borderRadius: '2px'
                    }}></div>
                    康友圈热点
                </div>
                
                <VirtualList
                    data={healthArticles}
                    hasMore={hasMore}
                    loading={isLoading}
                    loadingMore={isLoadingMore}
                    onLoadMore={fetchHealthArticles}
                    onRefresh={handleRefresh}
                    refreshing={isRefreshing}
                    pullToRefresh={true}
                    containerHeight="60vh"
                    style={{ WebkitOverflowScrolling: 'touch', overscrollBehavior: 'contain' }}
                    loadMoreText="上拉加载更多康友圈热点"
                    loadingText="正在加载中..."
                    noMoreText="所有文章已加载完毕"
                    emptyText="暂无康友圈热点"
                    onItemClick={(item) => navigate('/detail', {
                        state: {
                            title: item.title,
                            subtitle: item.subtitle,
                            image: item.image,
                            description: item.summary,
                            tags: item.tags,
                            extraInfo: `作者：${item.author} | 发布时间：${item.publishTime} | 阅读量：${item.readCount} | 点赞数：${item.likeCount}`
                        }
                    })}
                />
            </div>

            {/* 热门活动 */}
            <div style={{
                margin: '0 16px 16px',
                backgroundColor: '#fff',
                borderRadius: '12px',
                padding: '20px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
                <div style={{
                    fontSize: '18px',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                    color: '#333',
                    display: 'flex',
                    alignItems: 'center'
                }}>
                    <div style={{
                        width: '4px',
                        height: '20px',
                        backgroundColor: '#fa8c16',
                        marginRight: '12px',
                        borderRadius: '2px'
                    }}></div>
                    热门活动
                </div>
                
                {/* 活动卡片网格 */}
                <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(2, 1fr)',
                    gap: '16px',
                    marginBottom: '20px'
                }}>
                    <div
                        style={{
                            backgroundColor: '#fff7e6',
                            borderRadius: '12px',
                            padding: '16px',
                            border: '2px solid #ffd591',
                            cursor: 'pointer',
                            transition: 'all 0.3s ease'
                        }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '健康体检优惠',
                                subtitle: '年度体检套餐，享受8折优惠',
                                image: 'https://img.freepik.com/free-vector/medical-checkup-concept-illustration_114360-7486.jpg',
                                description: '我们推出年度健康体检优惠活动，为您的健康保驾护航。体检套餐包含全面的身体检查项目，帮助您及时发现健康隐患，预防疾病。',
                                tags: ['健康体检', '优惠活动', '体检套餐'],
                                extraInfo: '活动时间：全年有效，体检项目包括血常规、尿常规、心电图、B超等，支持预约和上门服务。'
                            }
                        })}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.transform = 'translateY(-4px)';
                            e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.15)';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.transform = 'translateY(0)';
                            e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
                        }}
                    >
                        <div style={{
                            fontSize: '16px',
                            fontWeight: 'bold',
                            color: '#d46b08',
                            marginBottom: '8px'
                        }}>健康体检优惠</div>
                        <div style={{
                            fontSize: '12px',
                            color: '#8c6800',
                            lineHeight: '1.4'
                        }}>年度体检套餐，享受8折优惠</div>
                    </div>
                    <div
                        style={{
                            backgroundColor: '#f6ffed',
                            borderRadius: '12px',
                            padding: '16px',
                            border: '2px solid #b7eb8f',
                            cursor: 'pointer',
                            transition: 'all 0.3s ease'
                        }}
                        onClick={() => navigate('/detail', {
                            state: {
                                title: '专家义诊',
                                subtitle: '每周六专家免费义诊活动',
                                image: 'https://img.freepik.com/free-vector/doctor-examining-patient-concept-illustration_114360-7897.jpg',
                                description: '我们定期举办专家义诊活动，邀请各科室知名专家为患者提供免费诊疗服务。这是回馈社会、服务患者的重要公益活动。',
                                tags: ['专家义诊', '免费诊疗', '公益活动'],
                                extraInfo: '活动时间：每周六上午9:00-12:00，地点：医院门诊大厅，参与科室：内科、外科、儿科、妇科等。'
                            }
                        })}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.transform = 'translateY(-4px)';
                            e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.15)';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.transform = 'translateY(0)';
                            e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
                        }}
                    >
                        <div style={{
                            fontSize: '16px',
                            fontWeight: 'bold',
                            color: '#389e0d',
                            marginBottom: '8px'
                        }}>专家义诊</div>
                        <div style={{
                            fontSize: '12px',
                            color: '#237804',
                            lineHeight: '1.4'
                        }}>每周六专家免费义诊活动</div>
                    </div>
                </div>

                {/* 活动列表标题 */}
                <div style={{
                    fontSize: '16px',
                    fontWeight: 'bold',
                    marginBottom: '16px',
                    color: '#333',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between'
                }}>
                    <span>更多活动</span>
                    <span style={{
                        fontSize: '12px',
                        color: '#999',
                        fontWeight: 'normal'
                    }}>共 {activitiesList.length} 个活动</span>
                </div>

                {/* 活动列表展示更多活动 */}
                <div style={{
                    maxHeight: '300px',
                    overflowY: 'auto',
                    border: '1px solid #f0f0f0',
                    borderRadius: '8px'
                }}>
                    {activitiesList.map((activity, index) => (
                        <div
                            key={index}
                            style={{
                                padding: '12px',
                                borderBottom: index < activitiesList.length - 1 ? '1px solid #f0f0f0' : 'none',
                                cursor: 'pointer',
                                transition: 'all 0.3s ease'
                            }}
                            onClick={() => navigate('/detail', {
                                state: {
                                    title: activity.title,
                                    subtitle: activity.subtitle,
                                    image: activity.image,
                                    description: activity.description,
                                    tags: activity.tags,
                                    extraInfo: activity.extraInfo
                                }
                            })}
                            onMouseEnter={(e) => {
                                e.currentTarget.style.backgroundColor = '#f8f9fa';
                            }}
                            onMouseLeave={(e) => {
                                e.currentTarget.style.backgroundColor = 'transparent';
                            }}
                        >
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                gap: '12px'
                            }}>
                                <div style={{
                                    width: '48px',
                                    height: '48px',
                                    borderRadius: '8px',
                                    backgroundColor: activity.bgColor,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    flexShrink: 0
                                }}>
                                    {activity.icon}
                                </div>
                                <div style={{ flex: 1, minWidth: 0 }}>
                                    <div style={{
                                        fontSize: '14px',
                                        fontWeight: 'bold',
                                        color: '#333',
                                        marginBottom: '4px',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }}>
                                        {activity.title}
                                    </div>
                                    <div style={{
                                        fontSize: '12px',
                                        color: '#666',
                                        marginBottom: '4px',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }}>
                                        {activity.subtitle}
                                    </div>
                                    <div style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                        gap: '8px',
                                        fontSize: '10px',
                                        color: '#999'
                                    }}>
                                        <span style={{ fontSize: '10px' }}>🕒</span>
                                        <span>{activity.time}</span>
                                        <span style={{ fontSize: '10px' }}>📍</span>
                                        <span>{activity.location}</span>
                                    </div>
                                </div>
                                <div style={{
                                    fontSize: '12px',
                                    color: '#fa8c16',
                                    fontWeight: 'bold'
                                }}>
                                    {activity.status}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* 底部间距 */}
            <div style={{ height: '80px' }}></div>
        </div>
    );
}

export default Index;
